// @import url('@/assets/styles/font.less');

.bookpage {
  min-height: 100vh;
  background-color: #98B0EA;
  position: relative;
  .backicon {
    width: 60rpx;
    height: 60rpx;
    position: fixed;
    left: 40rpx;
    margin-top: 10rpx;
    z-index: 100;
  }
  .tip_p1 {
    padding-top: 80px;
    font-family: 'PingFangSC,PingFang SC';
    font-weight: 600;
    font-size: 42rpx;
    color: #2F0130;
    line-height: 68rpx;
    text-align: center;
    width: 640rpx;
    margin: auto;
    animation: upshow 1s;
    opacity: 0.8;
  }
  .tip_p2 {
    font-family: 'PingFangSC,PingFang SC';
    font-weight: 600;
    font-size: 42rpx;
    color: #2F0130;
    line-height: 68rpx;
    text-align: center;
    width: 640rpx;
    margin: auto;
    animation: upshow 1s;
    opacity: 0.8;
  }
  .toptitle {
    width: 382rpx;
    height: 66rpx;
    margin-top: 8rpx;
    transform: scale(0.8);
    position: fixed;
    left: calc(50% - 188rpx);
  }
  .twocard {
    display: flex;
    padding: 20px 24px 0 24px;
    justify-content: center;
  }
  .cardcn {
    width: 505rpx;
    height: 737rpx;
    border-radius: 36rpx;
    
  }
  .cardcnAnimation {
    animation: rotate3D 1s infinite linear; // 添加动画
    // 添加3D效果
    transform-style: preserve-3d;
  }

  .twoText {
    display: flex;
    flex-direction: column;
    padding: 10px 24px 0 24px;
    justify-content: center;
  }
  .textP {
    width: 640rpx;
    text-align: center;
    font-size: 32rpx;
    font-weight: bold;
    color: #2F0130;
  }
  .buttonstart {
    width: 640rpx;
    height: 120rpx;
    background: #2F0130;
    border-radius: 60rpx;
    color: #fff;
    font-size: 40rpx;
    font-weight: 500;
    line-height: 120rpx;
    text-align: center;
    margin: 40px auto 0;
    opacity: 0.6;
  }
}

// 定义3D旋转动画
@keyframes rotate3D {
  from {
    transform: rotateY(0deg);
  }
  to {
    transform: rotateY(360deg);
  }
}